<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8"/>
    <title>layui</title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <link rel="stylesheet" href="/lib/layui-v2.5.4/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all"/>
    <link rel="stylesheet" href="/css/public.css" media="all"/>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }


        .layuimini-main {
            margin: 0px 10px 10px 0px;
        }

        .layui-tab {
            margin: 0;
            text-align: left !important;
        }

        .icon {
            margin-right: 10px;
            color: #1aa094;
        }

        .layui-card-header {
            background-color: #cbddf3;
            padding: 5px;
            font-size: 14px;
            border: 1px solid #99bce8;
            box-shadow: #f3f7fb 0 1px 0px 0 inset;
            height: 20px;
            line-height: 20px;
        }

        .layui-tab-content {
            padding: 5px !important;
        }

        .layui-card-body {
            height: 680px;
            border-color: #99bce8;
            border-width: 1px;
            border-style: solid;
            background: #fff;
        }

        .layui-card-table {
            padding: 0 !important;
            margin: 0 !important;
        }

        .layui-table-view, .layui-table {
            margin: 0 !important;
        }

        .layui-table td, .layui-table th {
            position: relative;
            padding: 5px 10px;
            min-height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #0C0C0C;
        }

        .layui-table-view .layui-table[lay-size=sm] th .layui-table-cell {
            line-height: 30px;
            height: 30px;
            font-weight: bold;
            font-size: 12px;
        !important:;
        }

        .layui-table-view .layui-table td, .layui-table-view .layui-table th {
            padding: 0;
            border-top: none;
            border-left: none;
        }

        .search-header {
            height: 30px;
            margin: 0;
            padding: 0;
            border-style: solid;
            border-color: #99bce8;
            border-width: 1px;
            background-color: #d3e1f1;
        }

        .layui-btn-search {
            /*border: 1px solid #C9C9C9;*/
            /*background-color: #fff;*/
            background-color: #d3e1f1;
            color: #0C0C0C;
        }

        .layui-nav {
            padding: 0;
            color: #0C0C0C !important;
        }

        .layui-nav .layui-nav-item a {
            display: block;
            padding-left: 5px;
            /*padding-right: 20px;*/
            color: #0C0C0C;
            transition: all .3s;
            -webkit-transition: all .3s;
            font-size: 12px !important;
        }

        dd a {
            padding: 0 20px !important;
        }

        /*.layui-nav-child{*/
        /*    padding: 0 20px !important;*/
        /*}*/
        .closeBox a span.layui-nav-more {
            border-color: #333 transparent transparent;
        }

        .closeBox .layui-nav-child {
            top: 34px;
        }

        .layui-table-click {
            background-color: #99BBFF !important;
        }

        .tableSelect {
            min-width: 0 !important;
        }
    </style>
</head>
<body>
<div class="layuimini-container" style="height:calc(100% - 4px)">
    <div class="layuimini-main">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">缓存查询</li>

            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table id="cacheTable" lay-filter="cacheTable"></table>
                </div>

            </div>
        </div>


    </div>
</div>

<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>

    layui.use(['element', 'tree', 'table', 'form', 'tableSelect'], function () {
        var $ = layui.jquery,
            table = layui.table,
            layer = layui.layer
        ;
        var size = {
            width: window.innerWidth || document.body.clientWidth,
            height: window.innerHeight || document.body.clientHeight
        }

        //方法渲染：
        table.render({
            elem: '#cacheTable',
            method: 'get',
            url: '/sys/getAllCacheKey',
            data: [],
            cols: [ [
                {field: 'keyName', title: '缓存KEY', width: '40%', sort: true},
                {field: 'activeTime', title: '有效期(秒)', width: '10%'},
                {field: 'keyType', title: '数据类型', width: '10%'},
                {
                    title: '操作', templet: function (d) {
                        // let str = '<button type="button" class="layui-btn  layui-btn-sm" onclick="getCache('+d.keyName+ ')">查看</button>';
                        return '<button type="button" class="layui-btn  layui-btn-sm" onclick=getCache("' + d.keyName + '")>查看</button><button type="button" class="layui-btn layui-btn-danger layui-btn-sm" onclick=delCache("' + d.keyName + '")>清除</button>';
                    }
                },
                {field: 'applyId', title: '缓存说明'}
            ]],
            size: 'lg',   //尺寸
            skin: 'nob',  //line （行边框风格）  row （列边框风格） nob （无边框风格)
            // height: '670',
            even: true  //隔行背景
        });

        window.getCache = function (keyName) {
            getCacheBykey(keyName);
        }
        window.delCache = function (keyName) {
            layer.confirm('您确定要删除此缓存？', {}, function () {
                layer.closeAll();
                delCacheBykey(keyName);
            });
        }

        function getCacheBykey(key) {
            var index = layer.msg('服务器处理中...', {
                icon: 16
                , shade: 0.08,
                time: 0
            });
            $.ajax({
                url: "/sys/getCacheBykey",
                method: "get",
                data: {
                    keyName: key
                },
                success: function (data) {
                    layer.close(index);
                    let str = '<textarea style="border-color: #99bce8;border-width: 2px;box-sizing: border-box;border-style:solid;height: 99%;width:100%">';
                    str += JSON.stringify(data, null, 4);
                    str += '</textarea>';
                    layer.open({
                        title: '详情',
                        type: 1,
                        area: ['40%', '80%'], //宽高
                        content: str,
                        btn: '确定'
                    });
                },
                error: function (xhr) {
                    layer.close(index);
                    layer.alert(xhr.responseText);
                }
            });
        }

        function delCacheBykey(key) {
            $.ajax({
                url: "/sys/delCacheBykeyName",
                method: "get",
                data: {
                    keyName: key
                },
                success: function (data) {
                    if (data.code == '0') {
                        table.reload('cacheTable');
                    } else {
                        console.info(data.msg);
                        layer.alert(data.msg);
                    }
                }
            });
        }
    });
</script>

</body>
</html>
